<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="myCanvas" width="400px" height="500px">
        您的浏览器不支持canvas请更新浏览器！！
    </canvas>
</body>
<script>
	 var myCanvas = document.querySelector('#myCanvas');
        var paint = myCanvas.getContext('2d');
        paint.fillStyle = 'red';
        paint.fillRect(10,10,100,100);
        paint.beginPath();
        paint.lineWidth = 1;
        paint.strokeStyle = 'blue';
        paint.rect(200,0,100,100);
        paint.stroke();
         paint.beginPath();
    paint.arc(300,300,100,0,360/180*Math.PI,false);
    paint.strokeStyle = 'red';
    paint.stroke();
    paint.fillStyle = 'blue';
    paint.fill();
    paint.closePath();
      myCanvas.onmousedown = function(e){
            paint.beginPath();
            var x = e.pageX - myCanvas.offsetLeft;
            var y = e.pageY - myCanvas.offsetTop;
            paint.moveTo(x,y);
            document.onmousemove = function(e){
                var x = e.pageX - myCanvas.offsetLeft;
                var y = e.pageY - myCanvas.offsetTop;
                paint.lineTo(x,y);
                paint.stroke();
            };
            document.onmouseup = function(){
                document.onmousemove = document.onmousedown = null;
            }
            return false; 
            

        }
        
</script>
</html>